<template>
    <div>
        <el-form label-width="80px" :inline="true" @submit.native.prevent>
            <el-form-item label="导演名字">
                <el-input placeholder="请输入导演名字" @keydown.native.enter="queryDirectorBtn" v-model="directorName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryDirectorBtn">查询</el-button>
            </el-form-item>
        </el-form>
        <el-divider content-position="left">导演数据列表</el-divider>
            <persion @deletePersion="del(director.id)" v-for="director in directorList" :key="director.id" :name="director.director_name" :avatar="director.director_avatar"></persion>
    </div>
</template>

<script>
    import persion from "@/components/Persion.vue";
    import httpApi from "@/http/index"
    export default {
        components: {
           persion,
        },
        data() {
            return {
                directorList:'',
                directorName:''
            }
        },
        methods: {
            // 删除导演
            del(id){
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = 'http://localhost:3010/movie-director/del'
                    // myaxios.post(url,{id}).then(res=>{
                    //     if(res.data.code == 200){
                    //         this.queryDirectorBtn()
                    //     }
                    // })
                    httpApi.directorApi.delete({id}).then(res=>{
                        if(res.data.code == 200){
                            this.queryDirectorBtn()
                        }
                    })
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            },
            // 获取导演列表信息
            directorListFun(){
                // let url = 'http://localhost:3010/movie-directors'
                let params = {page:1,pagesize:100}
                // myaxios.get(url,params).then(res=>{
                //     console.log('导演列表返回结果',res)
                //     this.directorList = res.data.data      
                // })
                httpApi.directorApi.queryAllDirector(params).then(res=>{
                    console.log('导演列表返回结果',res)
                    this.directorList = res.data.data 
                })
            },
            // 模糊查询导演点击事件
            queryDirectorBtn(){
                if(this.directorName.trim()){
                    this.queryDirecotr()
                }else{
                    this.directorListFun()
                }
            },
            queryDirecotr(){
                // let url ='http://localhost:3010/movie-directors/name'
                let params = {name:this.directorName.trim()}
                // myaxios.post(url,params).then(res=>{
                //     console.log('模糊查询结果',res);
                //     this.directorList = res.data.data
                // })
                httpApi.directorApi.queryDirectorByName(params).then(res=>{
                    console.log('模糊查询结果',res);
                    this.directorList = res.data.data                    
                })
            }

        },
        mounted(){
            this.directorListFun()
        }

    }
</script>

<style lang="scss" scoped>

</style>